什麼是 Box model?

為 Interview Bit 的第 1 題，17題和36題。

定義

讓我們先看 w3Schools 的定義。

The CSS box model is essentially a box that wraps around every HTML element.

也就是說 box model 是圍繞 HTML 元素的一個框框，這一個框框叫做 box model。

內容物

box model 裡面包含 content，padding，border 和 margin。

• content : 下圖藍色框框，為 text 或是 img 本身的 width 和 height
• padding：下圖綠色框框，在 content 的內容周圍加上指定大小的空間
• border：下圖黃色框框，區隔元素跟元素之間用的，border 最外圍是元素的最外圍
• margin：下圖橘色框框，元素和元素之間的距離

目的

box model 的目的是藉由 content，padding，border 和 margin 在計算元素 width 和 height。

元素 (div, span, ...)

跟 box-sizing 是什麼關係?

常常會聽到 box-sizing 和 box-model 有關，但是 2 者實際上的關係為何?

先定義什麼是 box-sizing?

以下為 mdn web docs 的定義， box-sizing 為一個元素計算過後的總寬度和總長度的值。

The box-sizing property sets how the total width and height of an element is calculated.

那總高度和總寬度是怎麼算出來的?
會根據 box-sizing 的屬性，總高度和總寬度算法並不一樣。

• box-sizing: content-box

  元素的 width ， height 設置在 content 層，也就是說 padding，border 需要另外加在元素上面。於是總高度和總寬度算法為 content + 2 * padding (左右2邊) + 2 * border (左右2邊) 。

• box-sizing: border-box

  元素的 width，height 設置在 border 層，也就是說 padding，border 已經包含在元素的 width 和 height 裡面。於是總高度和總寬度算法為 元素的 width 和 height。

box model 會影響 box-sizing 所計算出來的大小。

這樣講有點抽象，可以直接看範例。

CodePen 範例：

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

div {
  /*   寬為 200 px */
  width: 200px;
  /*   高為 100 px */
  height: 100px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* 總寬度: 200px + (2 * 20px) + (2 * 8px) = 256px
     總高度: 100px + (2 * 20px) + (2 * 8px) = 156px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* 總寬度: 200px
     總高度: 100px
     Content box 寬度: 200px - (2 * 20px) - (2 * 8px) = 144px
     Content box 高度: 100px - (2 * 20px) - (2 * 8px) = 44px
  */
}

Content box

Border box

box-sizing 預設屬性

box-sizing的預設屬性為 content-box，但在排版上使用 border-box 比較直觀，且較容易計算，不用針對 padding，border 加加減減，所以有蠻多時候大家都會使用 border-box。

參考資料：
【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！
mdn web docs - box-sizing
CSS Box Model